import { Button, Form, Input } from "antd";
import { useNavigate } from "react-router-dom";
import styles from "./index.module.less";
/* import http from "@/api/login";
import { message } from "antd"; */
import poster from "@/assets/img/poster.png";
import React, { useEffect } from "react";
import { isEmptyType } from "@/utils/types";
const Login: React.FC = () => {
  const navigate = useNavigate();
  const [userInfoForm] = Form.useForm();
  const handleSubmit = async () => {
    /* const res: any = await http.create({
      ...userInfoForm,
    });
    if (res.code != 200) return message.error(res.message); */
    localStorage.setItem("user", JSON.stringify(userInfoForm.getFieldsValue()));
    navigate("/home");
  };
  // @ts-ignore
  const handleChange = (key: string) => {
    return () => {};
  };
  const requiredFields = ["username", "password"];
  const values = requiredFields.map((key: any) =>
    Form.useWatch(key, userInfoForm)
  );
  const validate = () => values.some((item) => isEmptyType(item));
  useEffect(() => {
    userInfoForm.setFieldsValue({
      username: "admin",
      password: 123456,
    });
  }, []);
  return (
    <div className={styles.container}>
      <img src={poster} alt="poster" className={styles.poster} />
      <Form
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ width: 500 }}
        autoComplete="off"
        form={userInfoForm}
        className={styles.loginForm}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: "请输入用户名!" }]}
        >
          <Input
            placeholder="请输入用户名"
            onChange={handleChange("username")}
          />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码!" }]}
        >
          <Input.Password
            placeholder="请输入密码"
            onChange={handleChange("password")}
          />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" onClick={handleSubmit} disabled={validate()}>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Login;
